<template>
    <view class="yiyujieguo">
        <p class="p1">结果分析</p>
        <p class="p2">本测试及结果由AI得出,仅供参考,不能作为诊断及医疗的依据</p>
        <view class="result" v-if="result">
            <p class="p3">{{ result.scope }}：{{ result.result }}</p>
            <p class="p4">{{ result.suggest }}</p>
            <p class="p5">测评结果概述：</p>
            <p class="p6" v-for="item,index in result.outline" :key="index">{{ index+1 }}:{{ item }}</p>
            <p class="p7">AI为你推荐以下科室：</p>
            <view class="keshi" v-for="item,index in result.recommend" :key="index">
                <view class="left">
                    <p class="p8">{{ item.dep_name }}</p>
                    <p class="p9">{{ item.hospital }}</p>
                </view>
                <view class="right">
                    <button @click="goGua(item.dep_id)">去挂号</button>
                </view>
            </view>
        </view>
        <view class="zaiceyici" v-if="result">
            <button @click="goTest">再次测试</button>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { api } from "../../api/api";
import type { answerT } from "../../types/type";
const result = ref<answerT>();
onLoad(async (options) => {
  const arr=options.arr.split(",")
  const res: any = await api.depression({ value:arr });
  result.value = res.data[0];
});
const goGua = (id: string) => {
  uni.navigateTo({
    url: "/navPage/doctor/doctor?dep_id="+id,
  });
}
const goTest=()=>{
    uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.yiyujieguo{
    width: 100vw;
    height: 100vh;
    background-color: #d7e8fe;
    padding: 20rpx;
    box-sizing: border-box;
    .p1{
        font-weight: 600;
        font-size: 35rpx;
    }
    .p2{
        margin: 20rpx 0;
        line-height: 40rpx;
    }
    .result{
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        background-color: #fff;
        .p3{
            font-weight: 600;
            font-size: 35rpx;
            color: #4073ff;
        }
        .p4{
            color: #4073ff;
            margin: 20rpx 0;
        }
        .p5,.p7{
            font-weight: 600;
            font-size: 35rpx;
            margin-bottom: 20rpx;
        }
        .p6{
            margin: 10rpx 0;
        }
        .keshi{
            width: 100%;
            background-color: #f4f8fb;
            border-radius: 20rpx;
            padding: 20rpx;
            box-sizing: border-box;
            margin: 20rpx 0;
            display: flex;align-items: center;
            justify-content: space-between;
            .left{
                .p8{
                    font-weight: 600;
                    font-size: 35rpx;
                    margin-bottom: 10rpx;
                }
                .p9{
                    color: #ccc;
                }
            }
            .right{
                button{
                    background-color: #4073ff;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 70rpx;
                }
            }
        }
    }
}
</style>
